<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../org/angular.min.js"></script>
    <script src="../org/jquery.min.js"></script>
</head>
<body>

<div ng-app="hd">

    <hd-tab></hd-tab>
</div>


<script>
    var m = angular.module('hd', []);
    m.directive('hdTab', function () {
        //构建指令的代码
        return {
            restrict:'E',
            templateUrl: '../view/59.html',
            scope:{

            },
            link: function (scope, elem, attr) {
                $(elem).delegate('a', 'click', function () {
                    $('a').removeClass('active'); //移除所有a链接
                    $(this).addClass('active');   //显示当前点击的a链接
                    //查找a元素出现的位置
                    var index = $(this).index();
                    $(elem).find('div.lists').hide(); //隐藏所有div.lists的div
                    $(elem).find('div.lists').eq(index-1).show(); //显示当前所点击的div.lists的div
                })
            },
            controller:['$scope', function ($scope) {
                $scope.data=[
                    {id:1, title:'培训', data:[
                        {id:1, title:'HTML5'},
                        {id:2, title:'PHP'}
                    ]},
                    {id:2, title:'开源产品', data:[
                        {id:1, title:'hdphp'},
                        {id:2, title:'hdcms'}
                    ]}
                ];
            }],

        }
    });



</script>


</body>
</html>

